<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rotating Rod</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define parameters for the rod
        const startPoint = { x: 80, y: 280 };
        const endPoint = { x: 420, y: 130 };
        const rodThickness = 14;
        
        // Calculate rod properties from points
        const dx = endPoint.x - startPoint.x;
        const dy = endPoint.y - startPoint.y;
        const rodLength = Math.hypot(dx, dy);
        const angle = Math.atan2(dy, dx);

        // Define the infinitesimal element 'dm'
        const r_start_ratio = 0.4; // The element starts at 40% of the rod length
        const dr_ratio = 0.2;      // The element's length is 20% of the rod length
        const r_start_pixels = rodLength * r_start_ratio;
        const dr_pixels = rodLength * dr_ratio;
        
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // --- Draw the Rod and its elements ---
        
        ctx.save();
        
        // Apply transformations to align with the rod
        ctx.translate(startPoint.x, startPoint.y);
        ctx.rotate(angle);
        
        // Set styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = '#666'; // Gray for the element
        
        // Draw the filled 'dm' element
        ctx.fillRect(r_start_pixels, -rodThickness / 2, dr_pixels, rodThickness);
        
        // Draw the outline of the entire rod
        ctx.strokeRect(0, -rodThickness / 2, rodLength, rodThickness);

        // --- Draw the labels along the rod (r, dr, dm) ---
        ctx.fillStyle = 'black';
        
        // Label 'r'
        ctx.font = 'italic 22px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('r', r_start_pixels / 2, -rodThickness / 2 - 8);
        
        // Label 'dr'
        ctx.fillText('dr', r_start_pixels + dr_pixels / 2, -rodThickness / 2 - 8);
        
        // Label 'dm'
        ctx.textBaseline = 'top';
        ctx.fillText('dm', r_start_pixels + dr_pixels / 2, rodThickness / 2 + 8);
        
        ctx.restore(); // Restore context to original state (no rotation/translation)
        
        // --- Draw labels outside the rod (O, L) ---
        
        // Label 'O' at the start point
        ctx.font = '22px Times New Roman';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('O', startPoint.x - 10, startPoint.y + 10);
        
        // Label 'L' at the end point
        ctx.textAlign = 'left';
        ctx.fillText('L', endPoint.x + 10, endPoint.y - 10);

        // --- Draw the figure caption ---
        ctx.font = '24px KaiTi'; // A common Chinese font for captions
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = 'black';
        ctx.fillText('题 7 图', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>